list<!--
 * @Descripttion:人员报表
 * @version:
 * @Author: ada.wu
 * @Date:2024-03-11 11:26:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-09 14:56:01
-->
<template>
  <div class="hub">
    <div class="m-t">
      <div style="position: relative;">
        <div class="t-c p-tb">
          <img src="/@/assets/report/employee.svg">
        </div>
        <img src="/@/assets/report/employee-tag.svg" style="position: absolute;right: 6px;top:6px;">
        <div class="radius m-tb m-lr-xs bg-white p-lr-sm p-tb">
                 <van-skeleton title :row="6" v-show="isQuery" />

          <table class="vux-table">
            <thead>
              <tr class="bg-head">
                <th class="t-c t-lg p-tb-sm t-m-x text-base" width='15%' colspan="7">{{queryParam.evaluatedName}}</th>
              </tr>
              <tr class="p-tb-xs">
                <th class="t-c" width='15%' style="line-height: 1.2;">
                  <div>测评</div>
                  <div>名称</div>
                </th>
                <th class="t-c" width='15%'>时间</th>
                <th class="t-c" width='14%'>上级分 </th>
                <th class="t-c" width='14%'>平级分</th>
                <th class="t-c" width='14%'>下级分</th>
                <th class="t-c" width='14%'>映射分</th>
                <th class="t-c" width='14%'>综合</th>
              </tr>
            </thead>
            <tbody>
              <!-- <template v-for="item in 10"> -->
              <tr class="tr-bg p-tb-xs" v-for="(item,index) in listData" :key="index">
                <th class="t-c" width='15%' style="line-height: 1.2;"><div style="padding:3px">{{item.activityName}}</div></th>
                <th class="t-c" width='15%'>{{item.endDate}}</th>
                <th class="t-c" width='14%'>{{item.superior}}</th>
                <th class="t-c" width='14%'>{{item.sameLevel}} </th>
                <th class="t-c" width='14%'>{{item.subordinate}}</th>
                <th class="t-c" width='14%'>{{item.mapping}}</th>
                <th class="t-c" width='14%'>{{item.total}}</th>
              </tr>
              <!-- <tr class="tr-bg p-tb-xs">
                <th class="t-c" width='15%' style="line-height: 1.2;"><div style="padding:3px">2024年一季度管理人员绩效评估</div></th>
                <th class="t-c" width='15%'>2024/1</th>
                <th class="t-c" width='14%'>90 </th>
                <th class="t-c" width='14%'>100</th>
                <th class="t-c" width='14%'>80</th>
                <th class="t-c" width='14%'>80</th>
                <th class="t-c" width='14%'>80</th>
              </tr> -->
              <!-- </template> -->
            </tbody>
          </table>

        </div>

      </div>
    </div>
  </div>

</template>
<script lang="ts">
import { Search, PullRefresh, Divider } from "vant";
//util
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { PageEnum } from "/@/enums/pageEnum";
import { getNewObj } from "/@/util";

//api
import { personReportMobile } from "/@/api/ExamApi";
export default {
  name: "EmployeeDetail",
  components: {
    [Search.name]: Search,
    [Divider.name]: Divider,
    [PullRefresh.name]: PullRefresh,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
 let {
      evaluatedUserId = "",
      valuatorUserId = "",
      evaluatedName = "",
      startTime = "",
      endTime = "",
    } = route.query;
    const state = reactive({
      isQuery: false,
      
      queryParam: {
         evaluatedName, //被评价者名称，左like
        evaluatedUserId, //被评价者userId
        startTime, //开始时间
        endTime, //结束时间
        valuatorUserId, //评价者userId

        pageNumber: 1, //当前页
        pageSize: 100, //分页大小
      },
      listData: <any>[],
      listFinished: false,
    });
    onMounted(() => {
      nextTick(() => {
        queryList()
      });
    });

    const queryList = () => {
      // if (state.isQuery) return;
      state.isQuery = true;
      let { queryParam } = getNewObj(state);
      personReportMobile({
        ...queryParam,
      })
        .then((res: any) => {
          if (res) {
            state.listData = [...state.listData, ...res.list];
            if (res.list.length < state.queryParam.pageSize) {
              state.listFinished = true;
            } else {
              state.queryParam.pageNumber++;
            }
          } else {
            state.listData = [];
            state.listFinished = true;
          }
        })
        .catch(() => {
          state.listFinished = true;
        })
        .finally(() => {
          state.isQuery = false;
        });
    };

    return {
      ...toRefs(state),
    }
     
  },
};
</script>

<style lang="scss" scoped>
::v-deep(.van-cell) {
  align-items: center;
}

::v-deep(.van-hairline--top-bottom:after) {
  border-width: 0 0 1px 0;
  right: -42%;
  left: -42%;
}
</style>
